<template>
	<view>
		<scroll-view scroll-y class="second-menu">
			<view class="flex justify-center padding-sm bg-white">
				<button class="bg-gradual-orange" @click="onDel">删除</button>
				<button class="bg-gradual-green" @click="onSaveHtml">保存为草稿</button>
				<button class="bg-gradual-green" @click="onSaveJSON">保存为JSON</button>
			</view>
			<cuBar title="基础设置" hint="Modal" modal="3"></cuBar>
			<view v-if="elementAttribute!=null">
				<view class="flex">
					<view class="flex-sub">
						<uniInput title="宽" :value="elementAttribute.width"></uniInput>
					</view>
					<view class="flex-sub">
						<uniInput title="高" :value="elementAttribute.height"></uniInput>
					</view>
				</view>
				<uniInput title="背景颜色" hint="请输入颜色" :value="elementAttribute.bgColor"></uniInput>
				<uniInput title="字体大小" hint="请输入字体大小" :value="elementAttribute.fontSize"></uniInput>
				<uniInput title="字体颜色" hint="请输入字体颜色" :value="elementAttribute.textColor"></uniInput>
				<uniInput  title="文字" :value="elementAttribute.name" hint="请输入文字" @oninput="onUpdataItem"></uniInput>
			</view>
			<template>
				<cuBar title="图片选择" hint="Modal" modal='3'></cuBar>
				<uniUploader></uniUploader>
			</template>
			<cuBar title="数据设置" hint="Modal" modal="3"></cuBar>
			<uniInput title="接口地址" hint="请输入接口地址"></uniInput>
			<view class="padding-sm">
				<textarea class="cu-textarea bg-white padding-sm radius" maxlength="-1" :disabled="modalName!=null" @input="textareaAInput"
				 placeholder="请输入数据json"></textarea>
			</view>
		</scroll-view>
		<view class="modal cu-modal flex justify-center align-center" :class="modalName=='JsonModal'?'show':''">
			<view class="modal-content padding bg-white radius">
				<view class="text-size-34 text-black text-bold padding-sm">页面JSON</view>
				<textarea style="height: 55vh;overflow-y: scroll;width: 100%;" class="text-size-30 bg-gray radius padding-sm"
				 maxlength="-1" :value="content"></textarea>
			
				<view class="flex justify-center padding-sm bg-white margin-top-sm">
					<button class="bg-gradual-green" @click="onCopy">复制</button>
					<button class="bg-gradual-green margin-left-sm" @click="modalName=null">关闭</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import cuGrid from '@/components/single/grid/cu-grid.vue'
	import cuBar from '@/components/single/bar/cu-bar.vue';
	import uniInput from '@/components/single/from/uni-input.vue';
	import uniUploader from '@/components/single/upload/uni-uploader.vue'
	export default {
		components: {
			cuGrid,
			cuBar,
			uniInput,
			uniUploader
		},
		data() {
			return {
				modalName: null,
				content:'',
				textareaAValue: ''
			}
		},
		props: {

		},
		computed: {
			...mapState({
				active: state => state.active,
				pageValue: state => JSON.stringify(state.diy.pageValue),
				elementAttribute: state => state.diy.elementAttribute
			})
		},
		watch: {
			matchLeftWindow: {
				immediate: true,
				handler(newMatches) {
					this.setMatchLeftWindow(newMatches)
				}
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showCalendar = true;
			}, 350);
			console.log(this.elementAttribute)

		},
		methods: {
			...mapMutations(['setMatchLeftWindow', 'setActive', 'delPageElement', 'updateElementList', 'updateElementAtrr']),
			textareaAInput(e) {
				this.textareaAValue = e.detail.value
			},
			onSaveJSON: function() {
				this.content=this.pageValue;
				this.modalName = 'JsonModal';
			},onSaveHtml:function(){
				const diypage = document.getElementById("diypage");
				this.content=diypage;
				this.modalName = 'JsonModal';
			},
			onCopy: function() {
				this.modalName = null;
				uni.setClipboardData({
					data: this.pageValue.toString(),
					success: function() {
						console.log('success');
					}
				});
			},
			onDel: function() {
				this.delPageElement();
			},
			onUpdataItem: function(e) {
				let self = this;
				let param = this.elementAttribute;
				param.title = e;
				this.updateElementAtrr(param);
				setTimeout(e => {
					this.updateElementList();
				}, 500)
			}
		}
	}
</script>

<style scoped>
	.second-menu {
		width: 350px;
		background-color: #F8F8F8;
		height: 95vh;
		border-left: #CCCCCC 2upx solid;
	}

	.icon-image {
		width: 30px;
		height: 30px;
	}

	.cu-textarea {
		height: 40vh;
		width: 100%;
	}

	.modal {
		height: 100vh;
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
	}

	.modal-content {
		height: 70vh;
		width: 50vw;
	}
</style>
